<template>
    <MainDetails />
        <BgLine />
        <BackGround>
            <div class='_main'>
                <div class="_main_name">-- 审核成员 --</div>
                <div class="_main_m">
                   <div class="_main_m_list" v-for="item in list" :key="item">
                       <div class="_main_m_list_c">
                           <div class="_m_c_l">
                               <span>会员：</span>
                               <span>{{ item.address.substring(0,15) + "***" + item.address.substring(item.address.length - 4) }}</span>
                           </div>
                           <div class="_m_c_r" @click="reject(item)">拒绝</div>
                       </div>
                       <div class="_main_m_list_c1">
                           <div class="_m_c_l">
                               <span>战力：</span>
                               <span>{{ item.dynamicPower }}</span>
                           </div>
                           <div class="_m_c_r1" @click="apply(item)">通过</div>
                       </div>
                   </div>
                </div>
            </div>
        </BackGround>
</template>
<script setup>
    import MainDetails from '@components/MainDetails/index.vue'
    import BgLine from '@components/BgLine/index.vue'
    import BackGround from "@components/BackGround/index.vue";
    import http from "../../http";
    import {ref} from "vue";
    import {useI18n} from "vue-i18n";

    const {t} = useI18n()

    const list = ref([])

    async function init() {
      var res = await http.get('/api/union/applyUsers')
      if (res.code === 200) {
        list.value = res.data
      }
    }

    async function apply(item) {
      var res = await http.post(`/api/union/audit?id=${item.id}&status=true`)
      if (res.code === 200) {
        Toast(t('operationSuccess'))
      }
      await init()
    }

    async function reject(item) {
      var res = await http.post(`/api/union/audit?id=${item.id}&status=false`)
      if (res.code === 200) {
        Toast(t('operationSuccess'))
      }
      await init()
    }

    init()

</script>
<style lang="scss" scoped>
    ._main_name {
    font-size: 18px;
    @include fontTCMedium;
    font-weight: 500;
    color: $color3;
    line-height: 25px;
  }
._main  {
    padding: 18px 15px;
    position: relative;

  }
    ._main_m {
        width: 345px;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 63px;
        transform: translateX(-50%);
    }
    ._main_m_list {
        background-color: #845F49;
        width: 100%;
        height: 105px;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 20px 15px;
    }
    ._main_m_list_c {
        @include flex;
    }
    ._main_m_list_c1 {
        @include flex;
        margin-top: 17px;
    }
    ._m_c_l {
        font-size: 15px;
        span {
            color: #fff;
            &:nth-child(1) {
                color: #888888;
            }
        }
    }
    ._m_c_r {
        width: 68px;
        height: 24px;
        line-height: 25px;
        border-radius: 12px;
        font-size: 13px;
        color: #fff;
        background-color: #A4ADB3;
        cursor: pointer;
    }
    ._m_c_r1 {
         width: 68px;
        height: 24px;
        line-height: 25px;
        border-radius: 12px;
        font-size: 13px;
        color: #fff;
        background-color: #D8BC84;
        cursor: pointer;
    }
</style>
